<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>编辑专题表</title>
	<#include "/common/vue_resource.ftl">
	<#include "/common/upload.ftl">
	<style>
		.layui-transfer input[type=checkbox], .layui-transfer input[type=radio], .layui-transfer select{display:none;}
		.layui-transfer-data{height:320px;}
	</style>
</head>
<body>
<div id="app" v-cloak>
	<div class="ui-form">
		<form class="layui-form" @submit.prevent="submitForm()" method="post">
			<div class="layui-form-item">
				<label class="layui-form-label">分类<span class="ui-request">*</span></label>
				<div class="layui-input-block">
					<select v-model="record.categoryId" class="layui-input">
						<option value="">请选择</option>
						<option :value="item.id" v-for="(item, index) in categoryList" :key="item.id">{{item.name}}</option>
					</select>
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">标题<span class="ui-request">*</span></label>
				<div class="layui-input-block">
					<input type="text" v-model="record.title" placeholder="请输入标题" class="layui-input"/>
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">专题主图</label>
				<div class="layui-input-block">
					<div style="display:inline-block;vertical-align:top;" v-if="record.pic">
						<img :src="record.picFullPath" style="max-height:150px;max-width:150px;">
					</div>
					<div style="display:inline-block;vertical-align:top;">
						<a id="select-file-button">选择文件</a>
						<div class="layui-form-mid layui-word-aux">只能上传jpg/png文件，且不超过10MB</div>
					</div>
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">推荐状态</label>
				<div class="layui-input-block" style="padding-top:10px;min-height: 26px;">
					<label class="ui-form-label"><input type="radio" v-model="record.recommendStatus" value="1"/> 推荐中</label>
					<label class="ui-form-label"><input type="radio" v-model="record.recommendStatus" value="2"/> 取消推荐</label>
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">显示状态</label>
				<div class="layui-input-block" style="padding-top:10px;min-height: 26px;">
					<label class="ui-form-label"><input type="radio" v-model="record.showStatus" value="1"/> 显示</label>
					<label class="ui-form-label"><input type="radio" v-model="record.showStatus" value="2"/> 不显示</label>
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">描述</label>
				<div class="layui-input-block">
					<textarea v-model="record.description" placeholder="请输入描述" class="layui-textarea"></textarea>
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">关联产品</label>
				<div class="layui-input-block">
					<div id="product" class="demo-transfer"></div>
				</div>
			</div>
			<div class="layui-form-item">
				<div class="layui-input-block">
					<input type="submit" value="保存" class="layui-btn" />
				</div>
			</div>
		</form>
	</div>
</div>
<script type="text/javascript">
	var app = new Vue({
		el: '#app',
		data: {
			showTypes: false,
			record: {
				id: '${params.id!}',
				categoryId: '',
				title: '',
				pic: '',
				recommendStatus: '1',
				description: '',
				showStatus: '1',
				productIds:'',
			},
			categoryList: [],
			productList: [],
			subjectProductList: [],
			selectProductIds: [],
		},
		mounted: function () {
			this.init();
			this.loadCategory();
		},
		methods: {
			init:function(){
				var that = this;
				/*laydate.render({elem: '#beginDate', type:'datetime', done:function (value) {
						that.record.beginDate = value;
					}});*/

				$.upload({
					accept:{title:'Images',extensions:'jpg,jpeg,png',mimeTypes:'image/!*'},
					fileSingleSizeLimit: 10 * 1024 * 1024,//10M
					uploadSuccess:function (file, data) {
						if (!data.success) {
							$.message(data.message);
							return;
						}
						var result = data.data[0];
						that.record.picFullPath = "${params.fileRequestUrl!}" + result.path;
						that.record.pic = result.path;
					}
				});
			},
			initTransfer: function () {
				var data = [], values = [], that = this;
				for (var i = 0; i < this.productList.length; i++) {
					var item = this.productList[i];
					data.push({value: item.id, title: item.name});
				}
				for (var i = 0; i < this.subjectProductList.length; i++) {
					var item = this.subjectProductList[i];
					values.push(item.productId);
				}
				this.selectProductIds = values;
				transfer.render({
					elem: '#product',
					title: ['产品列表', '已关联产品'],
					data: data,
					value: values,
					showSearch: true,
					width: 255, //定义宽度
					//height: 210 //定义高度
					onchange: function (obj, index) {
						if (index == 0) {
							for (var i = 0; i < obj.length; i ++) {
								that.selectProductIds.push(obj[i].value);
							}
							return;
						}
						for (var i = 0; i < obj.length; i ++) {
							that.selectProductIds.remove(obj[i].value);
						}
					}
				});
			},
			loadCategory: function () {
				var that = this;
				$.http.post('${params.contextPath}/web/cmsSubjectCategory/queryList.json').then(function (data) {
					if (!data.success) {
						$.message(data.message);
						return;
					}
					that.categoryList = data.data;
					that.loadProduct();
				});
			},
			loadProduct: function () {
				var that = this;
				$.http.post('${params.contextPath}/web/pmsProduct/queryPublishList.json').then(function (data) {
					if (!data.success) {
						$.message(data.message);
						return;
					}
					that.productList = data.data;
					that.loadData();
				});
			},
			loadData: function () {
				if (!'${params.id!}') {
					this.initTransfer();
					return;
				}
				var that = this;
				$.http.post('${params.contextPath}/web/cmsSubject/query.json', {id: '${params.id!}'}).then(function (data) {
					if (!data.success) {
						$.message(data.message);
						return;
					}
					var item = data.data;
					for (var key in  that.record) {
						that.record[key] = item[key];
					}

					if (item.pic) {
						that.record.picFullPath = "${params.fileRequestUrl!}" + item.pic;
					}
					that.subjectProductList = item.subjectProductList || [];
					that.initTransfer();
				});
			},
			submitForm: function () {
				var proIds = this.selectProductIds.length > 0 ? this.selectProductIds.join(",") : "";
				this.record.productIds = proIds;
				$.http.post('${params.contextPath}/web/cmsSubject/<#if (params.id)??>modify<#else>save</#if>.json', this.record).then(function (data) {
					if (!data.success) {
						$.message(data.message);
						return;
					}
					var alt = layer.alert(data.message || "操作成功", function () {
						parent.app.loadData();
						parent.layer.closeAll();
						layer.close(alt);
					});
				});
			},
		}
	});
</script>
</body>

</html>
